<template>
  <div class="page-content">
    <el-card class="box-card" style="height:100%;" :body-style="{height:'100%'}">
      <video ref="videoPlayer" class="video-content" ></video>
    </el-card>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import Hls from 'hls.js';
// import { getInfo } from '@/api/user' 接口引入
export default {
  name: 'RealTimeVideo',
  data() {
    return {
      hls:null
    }
  },
  computed: {

  },
  mounted() {
    if (Hls.isSupported()) {
      const video = this.$refs.videoPlayer;
      this.hls = new Hls();
 
      this.hls.loadSource('https://open.ys7.com/v3/openlive/FF6607595_1_2.m3u8?expire=1763018468&id=778640946289029120&t=807db1b065f857e06b40834036b21f8c09c69dc4a075ed2c5e95addac81bb99e&ev=100');
      this.hls.attachMedia(video);
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    }
  },
  beforeDestroy() {
    if (this.hls) {
      this.hls.destroy();
    }
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
::v-deep .video-content{
  width: 100%;
  height:100%;
}
</style>